<template>
  <div class="connect">
    <div class="connect-form-wrap">
      <div class="head">
        <div class="avatar-and-info">
          <div class="avatar-wrap">
            <div class="avatar"><img :src="info.mer_avatar" class="objectCover" alt="" /></div>
            <!-- //todo -->
            <div class="person">大头</div>
            <div class="position">公司行政专员</div>
          </div>
          <div class="info-wrap">
            <p class="name">公司名称：{{ info.mer_name }}</p>
            <p class="address">地址：{{ info.mer_address || '--' }}</p>
            <p class="postcode">邮编：{{ info.postcode || '--' }}</p>
            <p class="zbz">找包装网站内链接：{{ info.zbz_weburl || '--' }}</p>
            <p class="website">公司网站：{{ info.company_weburl || '--' }}</p>
          </div>
        </div>
        <div class="info-pic">
          <Tooltip class="item" effect="dark" :disabled="$store.state.hasLogin" content="登录后查看" placement="top-start">
            <div class="info-wrap">
              <div class="phone item">
                <div class="img-wrap"><img src="~/assets/images/info-pic-phone.png" alt="" /></div>
                电话：
                <span v-if="$store.state.hasLogin">{{ info.company_tel || '--' }}</span>
                <span v-if="!$store.state.hasLogin">****</span>
              </div>
              <div class="mobile item">
                <div class="img-wrap"><img src="~/assets/images/info-pic-mobile.png" alt="" /></div>
                手机：
                <span v-if="$store.state.hasLogin">{{ info.company_phone || '--' }}</span>
                <span v-if="!$store.state.hasLogin">****</span>
              </div>
              <div class="fax item">
                <div class="img-wrap"><img src="~/assets/images/info-pic-fax.png" alt="" /></div>
                传真：
                <span v-if="$store.state.hasLogin">{{ info.company_fax || '--' }}</span>
                <span v-if="!$store.state.hasLogin">****</span>
              </div>
              <div class="emial item">
                <div class="img-wrap"><img src="~/assets/images/info-pic-email.png" alt="" /></div>
                邮箱：
                <span v-if="$store.state.hasLogin">{{ info.company_email || '--' }}</span>
                <span v-if="!$store.state.hasLogin">****</span>
              </div>
            </div>
          </Tooltip>
        </div>
      </div>

      <div class="message">
        <div class="title">
          <img src="~/assets/images/leave-message.png" alt="" />
          给企业留言
        </div>
        <div class="form-wrap">
          <m-form ref="form" :model="formData" :rules="rules" label-width="105px" label-position="left">
            <m-form-item prop="realname" label="姓名："><m-input v-model="formData.realname" style="width: 403px" /></m-form-item>
            <m-form-item prop="contact" label="联系电话："><m-input v-model="formData.contact" style="width: 403px" /></m-form-item>
            <m-form-item prop="email" label="邮箱："><m-input v-model="formData.email" style="width: 403px" /></m-form-item>
            <m-form-item prop="content" label="留言内容：">
              <m-input type="textarea" :autosize="{ minRows: 8 }" maxlength="500" show-word-limit v-model="formData.content" style="width: 90%" />
            </m-form-item>
            <m-form-item>
              <m-checkbox v-model="formData.mobile_type">
                <div style="display: flex; align-items: center; font-size: 16px">
                  我同意发送我的联系方式给该企业
                  <Tooltip content="勾选此项，则平台会发送您的联系方式给该企业，否则系统只提供您的姓名、公司、邮箱信息。" placement="right">
                    <img src="~/assets/images/icon-remarks.png" alt="" style="margin-left: 10px; margin-bottom: 2px" />
                  </Tooltip>
                </div>
              </m-checkbox>
            </m-form-item>
            <m-form-item>
              <div style="display: flex; justify-content: center">
                <m-button width="235" @click="submit">提交</m-button>
              </div>
            </m-form-item>
          </m-form>
        </div>
      </div>
    </div>
    <div class="map-wrap">
      <Amap ref="map" vid="amapDemo" :center="center" :zoom="zoom" :plugin="plugin" :events="events"></Amap>
    </div>
  </div>
</template>

<script>
import MForm from '@/components/common/m-form/MForm';
import MFormItem from '@/components/common/m-form/MFormItem';
import MInput from '@/components/common/m-input/MInput';
import MCheckbox from '@/components/common/m-checkbox/MCheckbox';
import MButton from '@/components/common/m-button/MButton';
import { Tooltip } from 'element-ui';
import { Amap, Marker as AmapMarker } from '@amap/amap-vue';
import { postMessageMer, contactInfoMer } from '@/request/api';

export default {
  name: 'Connect',
  components: {
    MButton,
    MCheckbox,
    MInput,
    MFormItem,
    MForm,
    Tooltip,
    Amap,
    AmapMarker
  },
  data() {
    return {
      id: '',
      info: {},
      formData: {},
      rules: {
        realname: [{ required: true, message: '请输入完整', trigger: 'blur' }],
        contact: [{ required: true, message: '请输入完整', trigger: 'blur' }],
        email: [{ required: true, message: '请输入完整', trigger: 'blur' }],
        content: [{ required: true, message: '请输入完整', trigger: 'blur' }]
      },
      zoom: 12,
      center: [],
      events: {
        init: o => {
          console.log(o.getCenter());
          o.getCity(result => {
            console.log(result);
          });
        }
      },
      plugin: [
        'ToolBar',
        {
          pName: 'MapType',
          defaultType: 0,
          events: {
            init(o) {
              console.log(o);
            }
          }
        }
      ]
    };
  },
  created() {
    this.id = this.$route.params.id;
    this.getInfo();
  },
  computed: {
    hasLogin() {
      return this.$store.state.hasLogin;
    }
  },
  methods: {
    submit() {
      let that = this;
      this.$refs.form.$refs.mForm.validate(res => {
        if (res) {
          that.$toastVant.loading('提交中');
          postMessageMer(that.formData)
            .then(() => {
              setTimeout(function() {
                that.$toastVant.success('提交成功!');
                that.formData = {};
              }, 500);
            })
            .catch(err => {
              that.$toastVant.fail(err.message);
            });
        }
      });
    },
    getInfo() {
      contactInfoMer(this.id)
        .then(res => {
          this.info = res.data;
          if (this.info.coordinate) {
            this.center = [this.info.coordinate.lng, this.info.coordinate.lat];
          } else {
            this.center = [];
          }
        })
        .catch(err => {
          this.$message.error(err.message);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.connect {
  .connect-form-wrap {
    width: 1200px;
    background-color: #fff;
    padding: 30px;
    margin-bottom: 50px;

    .head {
      height: 260px;
      background-color: rgb(243, 244, 247);
      padding: 15px 35px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #666;
      font-size: 16px;
      margin-bottom: 50px;

      .avatar-and-info {
        display: flex;
        align-items: center;

        .avatar-wrap {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-right: 100px;

          .avatar {
            width: 123px;
            height: 123px;
            border-radius: 123px;
            background-color: forestgreen;
            margin-bottom: 15px;
            overflow: hidden;
          }

          .person {
            margin-bottom: 15px;
          }
        }

        .info-wrap {
          font-size: 14px;

          p {
            margin-bottom: 10px;
          }
        }
      }

      .info-pic {
        width: 300px;
        height: 90%;
        background: url('~@/assets/images/info-bg.jpg') no-repeat 100%;
        display: flex;
        padding-left: 40px;
        align-items: center;
        color: #fff;

        .info-wrap {
          font-size: 14px;

          .item {
            margin-bottom: 5px;
            display: flex;
            align-items: center;

            .img-wrap {
              width: 20px;
              display: inline-flex;
              justify-content: center;
              padding-right: 12px;
            }
          }
        }
      }
    }

    .message {
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-size: 20px;
      color: #666;

      .title {
        width: 100%;
        padding-bottom: 25px;
        margin-bottom: 30px;
        border-bottom: solid 1px #eaeaea;

        img {
          margin-right: 10px;
        }
      }

      .form-wrap {
        padding: 0 50px;
      }
    }
  }

  .map-wrap {
    height: 448px;
    padding: 25px;
    background-color: #fff;
  }
}
</style>
